<template>
  <div class="mui-content mh-container pd pb">
    <mh-header headName="匹配" :showBack="showBack"> </mh-header>
    <div class="mui-segmented-control mh-segmented">
      <a class="mui-control-item mui-active" @click="handleCondition(1)"><span>主动匹配</span></a>
      <a class="mui-control-item" @click="handleCondition(2)"><span>被动匹配</span></a>
<!--       <a class="mui-control-item" @click="handleCondition(3)"><span>互动审核</span></a>
      <a class="mui-control-item" @click="handleCondition(4)"><span>红娘审核</span></a>
      <a class="mui-control-item" @click="handleCondition(5)"><span>产品审核</span></a> -->
      <a class="mui-control-item" @click="handleCondition(3)"><span>我的匹配</span></a>
    </div>

    <div class="match-outer bg-w">
      <div class="match-item mh-pd">
        <h4 class="match-header">待匹配</h4>
        <ul class="match-list flex">
          <li class="match-list-item flex" v-for="(item, index) in tobeMatched" :key="index" @tap='toView(item.id)'>
            <div class="list-lt">
              <div class="pic-box">
                <img :src="item.pic" alt="">
              </div>
            </div>
            <div class="list-rt">
              <p>
                <span class="txt-bold">{{item.originator_name}}</span>
                <span>{{item.sex || "未知"}}|{{item.age}}岁|{{item.province}}</span>
              </p>
              <p class="txt-time">下单{{item.startTime}}</p>
              <p class="txt-time">结单{{item.endTime}}</p>
            </div>
          </li>
        </ul>

      </div>

      <div class="match-item mh-pd">
        <h4 class="match-header">操作中</h4>
        <ul class="match-list flex">
          <li class="match-list-item flex" v-for="item in oneList" :key="item.id">
            <div class="list-lt">
              <div class="pic-box">
                <img :src="item.pic" alt="">
              </div>
            </div>
            <div class="list-rt">
              <p>
                <span class="txt-bold">{{item.originator_name}}</span>
                <span>{{item.sex || "未知"}}|{{item.age}}岁|{{item.province}}</span>
              </p>
              <p class="txt-time">下单{{item.startTime}}</p>
              <p class="txt-time">结单{{item.endTime}}</p>
            </div>
          </li>
        </ul>

      </div>

      <div class="match-item mh-pd">
        <h4 class="match-header">退单列表</h4>
        <ul class="match-list flex">
          <li class="match-list-item flex" v-for="item in twoList" :key="item.id">
            <div class="list-lt">
              <div class="pic-box">
                <img :src="item.pic" alt="">
              </div>
            </div>
            <div class="list-rt">
              <p>
                <span class="txt-bold">{{item.originator_name}}</span>
                <span>{{item.sex || "未知"}}|{{item.age}}岁|{{item.province}}</span>
              </p>
              <p class="txt-time">下单{{item.startTime}}</p>
              <p class="txt-time">结单{{item.endTime}}</p>
            </div>
          </li>
        </ul>

      </div>

      <div class="match-item mh-pd">
        <h4 class="match-header">恋爱中</h4>
        <ul class="match-list flex">
          <li class="match-list-item flex" v-for="item in threeList" :key="item.id">
            <div class="list-lt">
              <div class="pic-box">
                <img :src="item.pic" alt="">
              </div>
            </div>
            <div class="list-rt">
              <p>
                <span class="txt-bold">{{item.originator_name}}</span>
                <span>{{item.sex || "未知"}}|{{item.age}}岁|{{item.province}}</span>
              </p>
              <p class="txt-time">下单{{item.startTime}}</p>
              <p class="txt-time">结单{{item.endTime}}</p>
            </div>
          </li>
        </ul>

      </div>

      <div class="match-item mh-pd">
        <h4 class="match-header">订单结束</h4>
        <ul class="match-list flex">
          <li class="match-list-item flex" v-for="item in fourList" :key="item.id">
            <div class="list-lt">
              <div class="pic-box">
                <img :src="item.pic" alt="">
              </div>
            </div>
            <div class="list-rt">
              <p>
                <span class="txt-bold">{{item.originator_name}}</span>
                <span>{{item.sex || "未知"}}|{{item.age}}岁|{{item.province}}</span>
              </p>
              <p class="txt-time">下单{{item.startTime}}</p>
              <p class="txt-time">结单{{item.endTime}}</p>
            </div>
          </li>
        </ul>

      </div>
    </div>

    <tab-menu :activeTab="activeFootTab"> </tab-menu>
  </div>
</template>

<script>
  import MhHeader from '@/components/mh-header/mh-header'
  import TabMenu from '@/components/tab-menu/hn-tab';
  import {MH_API} from "@/api/api";
  export default {
    data () {
      return {
        showBack: false,
        activeFootTab: 1,
        tobeMatched: [
          // {
          //   id: '1',
          //   name: '章叁',
          //   pic: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=766585699,506578438&fm=26&gp=0.jpg',
          //   sex: 1,
          //   age: 23,
          //   city: '上海',
          //   placeTime: '2018-09-21 14:45',
          //   statementTime: '2018-09-21 14:45',
          // }
        ],
        oneList: [],
        twoList: [],
        threeList: [],
        fourList: []
      }
    },
    methods: {
      toView(id){
        this.$router.push({
          path: `/match/detail`,
          query: {
            id: id
          }
        });
      },
      handleCondition (i) {
        this.getData(i);
      },
      getData(type){
        let self = this;
        self.tobeMatched = [];
        let params = {};
        MH_API.getTryst({
          page: 1,
          limit: 10,
          status: 0,
          type: type
        }).then(res => {
          if (res.status === 200) {
            //self.tobeMatched = res.data;
            let newArr = res.data;
            for(let i=0,len=newArr.length;i<len;i++){
              newArr[i].startTime = newArr[i].create_time ? newArr[i].create_time.slice(0,10) : '';
              newArr[i].endTime = newArr[i].update_time ? newArr[i].update_time.slice(0,10) : '';
              newArr[i].pic = newArr[i].logo || "https://img.gsdlcn.com/uploads/allimg/121109/1-121109214308.jpg";
              if(newArr[i].status==0){
                self.tobeMatched.push(newArr[i])
              }
              else if(newArr[i].status==1){
                self.oneList.push(newArr[i])
              }
              else if(newArr[i].status==2){
                self.twoList.push(newArr[i])
              }
              else if(newArr[i].status==3){
                self.threeList.push(newArr[i])
              }
              else if(newArr[i].status==4){
                self.fourList.push(newArr[i])
              }
            }
            //self.tobeMatched = newArr;
          }
        })
      }
    },
    components: {
      MhHeader,
      TabMenu
    },
    created(){
      this.getData(1);
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/css/mixin";
  .mui-control-item span {
    font-size: 1.4rem;
  }
  .match-header {
    @include sc(1.2rem, #333);
    margin: 1.2rem 0;
    font-weight: bold;
  }
  .match-item {padding-bottom: .1rem;}
  .match-list {
    flex-wrap: wrap;
    .match-list-item {
      width: 50%;
      margin-bottom: .4rem;
      padding-right: .2rem;
      align-items: flex-start;
    }
  }
  .list-lt {margin-right: .2rem;}
  .pic-box {@include mh-avatar-box(3.1rem, 3.1rem)}
  .txt-bold {@include sc(1.3rem, #333);}
  .txt-time {@include sc(1.2rem, #666);}
</style>
